import { createRouter, createWebHistory } from 'vue-router'
import AdvancedComponentPatterns from '@views/advanced/AdvancedComponentPatterns.vue';
import PerformanceOptimization from '@views/advanced/PerformanceOptimization.vue';
import Composables from '@views/advanced/Composables.vue';

// 定义路由
const routes = [
  {
    path: '/',
    name: 'overview',
    component: () => import('@views/Overview.vue')
  },
  {
    path: '/composition',
    name: 'composition',
    component: () => import('@views/basic/CompositionApi.vue')
  },
  { path: '/reactive', name: 'reactive', component: () => import('@views/basic/ReactiveSystem.vue'), meta: { title: '响应式系统' } },
  {
      path: '/reactive-advanced',
      name: 'ReactiveAdvanced',
      component: () => import('@views/advanced/ReactiveAdvanced.vue'),
      meta: { title: '响应式系统高级特性', group: '基础' }
    },
    {    path: '/advanced-animation',
    name: 'AdvancedAnimation',
    component: () => import('@views/advanced/AdvancedAnimation.vue'),
    meta: { title: '高级动画特性' }
  },

  {    path: '/compiler-macros',
    name: 'CompilerMacros',
    component: () => import('@views/advanced/CompilerMacros.vue'),
    meta: { title: 'Vue 3 编译器宏' }
  },
  {    path: '/define-options',
    name: 'DefineOptions',
    component: () => import('@views/advanced/CompilerOptions.vue'),
    meta: { title: 'Vue 3 defineOptions' }
  },
  {    path: '/define-slots',
    name: 'DefineSlots',
    component: () => import('@views/advanced/CompilerSlots.vue'),
    meta: { title: 'Vue 3 defineSlots' }
  },
  {    path: '/define-model',
    name: 'DefineModel',
    component: () => import('@views/advanced/CompilerModel.vue'),
    meta: { title: 'Vue 3 defineModel' }
  },
  {    path: '/define-expose',
    name: 'DefineExpose',
    component: () => import('@views/advanced/CompilerExpose.vue'),
    meta: { title: 'Vue 3 defineExpose' }
  },
  {
    path: '/typescript-advanced',
    name: 'TypeScriptAdvanced',
    component: () => import('@views/typescript/TypeScriptAdvanced.vue'),
    meta: {
      title: 'TypeScript高级用法'
    }
  },
  {
    path: '/web-components',
    name: 'WebComponents',
    component: () => import('@views/advanced/WebComponentsIntegration.vue'),
    meta: {
      title: 'Web Components集成'
    }
  },
  {
    path: '/pinia-advanced',
    name: 'PiniaAdvanced',
    component: () => import('@views/state/PiniaAdvanced.vue'),
    meta: {
      title: 'Pinia高级状态管理'
    }
  },
  {
    path: '/lifecycle',
    name: 'lifecycle',
    component: () => import('@views/basic/Lifecycle.vue')
  },
  {
    path: '/components',
    name: 'components',
    component: () => import('@views/basic/ComponentComm.vue')
  },
  {
    path: '/performance',
    name: 'performance',
    component: () => import('@views/performance/PerformanceOptimization.vue')
  },
  {
    path: '/typescript',
    name: 'typescript',
    component: () => import('@views/typescript/TypeScriptSupport.vue')
  },
  {
    path: '/directives',
    name: 'directives',
    component: () => import('@views/advanced/CustomDirectives.vue')
  },
  {
    path: '/teleport',
    name: 'teleport',
    component: () => import('@views/advanced/Teleport.vue')
  },
  {
    path: '/suspense-transition',
    name: 'suspense-transition',
    component: () => import('@views/advanced/SuspenseTransition.vue')
  },
  {
    path: '/template-refs',
    name: 'template-refs',
    component: () => import('@views/advanced/TemplateRefsAndAdvancedAPI.vue')
  },
  {
    path: '/vue-router',
    name: 'vue-router',
    component: () => import('@views/basic/VueRouter.vue')
  },
  {
    path: '/advanced-features',
    name: 'advanced-features',
    component: () => import('@views/advanced/AdvancedFeatures.vue')
  },
  { 
    path: '/pinia', 
    name: 'pinia', 
    component: () => import('@views/state/Pinia.vue') 
  },
  { 
    path: '/script-setup', 
    name: 'script-setup', 
    component: () => import('@views/performance/ScriptSetup.vue') 
  },
  { 
    path: '/provide-inject', 
    name: 'provide-inject', 
    component: () => import('@views/advanced/ProvideInject.vue') 
  },
  { 
    path: '/async-components', 
    name: 'async-components', 
    component: () => import('@views/advanced/AsyncComponents.vue') 
  },
  { 
    path: '/global-properties', 
    name: 'global-properties', 
    component: () => import('@views/basic/GlobalProperties.vue') 
  },
  { 
    path: '/css-features', 
    name: 'css-features', 
    component: () => import('@views/performance/CssFeatures.vue') 
  },
  {
      path: '/animation-transition',
      name: 'animation-transition',
      component: () => import('@views/advanced/AnimationTransition.vue'),
      meta: { title: '动画与过渡效果演示' }
    },
    {
      path: '/custom-plugins',
      name: 'CustomPlugins',
      component: () => import('@views/advanced/CustomPlugins.vue'),
      meta: { title: '自定义插件系统高级演示' }
    },
    {
        path: '/advanced-component-patterns',
        name: 'AdvancedComponentPatterns',
        component: AdvancedComponentPatterns,
        meta: {
          title: '高级组件模式演示'
        }
      },
      {
        path: '/performance-optimization',
        name: 'PerformanceOptimization',
        component: PerformanceOptimization,
        meta: {
          title: '性能优化高级演示'
        }
      },
    {
      path: '/composition-api',
      name: 'CompositionApi',
      component: () => import('@views/advanced/CompositionApi.vue'),
      meta: { title: '组合式API高级演示' }
    },
    {
      path: '/composables',
      name: 'Composables',
      component: Composables,
      meta: { title: 'Vue 3高级组合函数演示' }
    },
  { 
    path: '/form-handling', 
    name: 'form-handling', 
    component: () => import('@views/basic/FormHandling.vue') 
  },
  { 
    path: '/switch-demo', 
    name: 'switch-demo', 
    component: () => import('@views/basic/SwitchDemo.vue'),
    meta: { title: '液态玻璃效果开关组件' } 
  },
  
  {
    path: '/suspense',
    name: 'suspense',
    component: () => import('@views/advanced/Suspense.vue'),
    meta: { title: 'Suspense 异步组件' }
  },
  {
    path: '/custom-directives',
    name: 'custom-directives',
    component: () => import('@views/advanced/CustomDirectives.vue'),
    meta: { title: '自定义指令' }
  },
  {    path: '/custom-renderer',
    name: 'CustomRenderer',
    component: () => import('@views/advanced/CustomRenderer.vue'),
    meta: { title: '自定义渲染器' }
  },

  {    path: '/reactivity-deep-dive',
    name: 'ReactivityDeepDive',
    component: () => import('@views/advanced/ReactivityDeepDive.vue'),
    meta: { title: '响应式原理深度解析' }
  },
  {    path: '/reactivity-system',
    name: 'ReactivitySystem',
    component: () => import('@views/advanced/ReactivitySystem.vue'),
    meta: { title: '响应式系统高级演示' }
  },
  {    path: '/suspense-async',
    name: 'SuspenseAsync',
    component: () => import('@views/advanced/SuspenseAsync.vue'),
    meta: { title: 'Suspense与异步组件' }
  },
  {    path: '/composition-functions',
    name: 'CompositionFunctions',
    component: () => import('@views/advanced/CompositionFunctions.vue'),
    meta: { title: '组合式函数高级用法' }
  },
  {    path: '/teleport-portal',
    name: 'TeleportPortal',
    component: () => import('@views/advanced/TeleportPortal.vue'),
    meta: { title: 'Teleport与Portals' }
  },
  {
    path: '/typescript-advanced',
    name: 'TypeScriptAdvanced',
    component: () => import('@views/typescript/TypeScriptAdvancedIntegration.vue'),
    meta: { title: 'TypeScript高级集成' }
  },
  
  // 捕获所有未匹配的路由，重定向到首页
  {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 可以在这里添加权限检查、页面标题设置等
  document.title = `Vue 3 特性 - ${to.meta.title || '概览'}`
  next()
})

export default router